const path = require('path')
const htmlWebpackHtml = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	mode: 'development',
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	devServer:{        
		// 设置服务器访问的基本目录       
		contentBase: path.resolve(__dirname,'dist'), //最好设置成绝对路径     
		 // 设置服务器的ip地址,可以是localhost       
		host:'localhost',        
		// 设置端口       
		port: 5000,        
		// 设置自动拉起浏览器       
		open: true    
	},
	plugins: [
		new htmlWebpackHtml({
			template: './src/index.html',
			filename: 'index.html'
		}),
		new VueLoaderPlugin()
	],
	module: {
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader'] },
			{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
			{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{test: /\.(jpg|png|gif|jpeg)$/, 
				use: 'url-loader?limit=500&name=[name].[ext]'
			},
			{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
			//vue配置
			{test: /\.vue$/, loader: 'vue-loader' },
			//字体 loader
			{ test: /\.(ttf|eot|svg|woff|woff2)$/, loader: 'url-loader' }, 
		]
	},
	resolve: {
		alias: {// 修改 Vue 被导入时候的包的路径
			"vue$": "vue/dist/vue.js"
		}
	}



}